<template>
	<view>
		<view class="tabbar">
			<view class="bar" :class="{'active':active==1}" @click="change('index')">
				<image v-if="active==1" src="@/static/tabbar/a-1.png" alt=""></image>
				<image v-else src="@/static/tabbar/a-2.png" alt=""></image>
				<view>
					积分超市
				</view>
			</view>
			<view class="bar" :class="{'active' :active==2}" @click="change('news')">
				<image v-if="active==2" src="@/static/tabbar/b-1.png" alt=""></image>
				<image v-else src="@/static/tabbar/b-2.png" alt=""></image>
				<view>
					<view>
						知识学习
					</view>
				</view>
			</view>
			<view class="bar" :class="{'active' :active==3}" @click="change('user')">
				<image v-if="active==3" src="@/static/tabbar/c-1.png" alt=""></image>
				<image v-else src="@/static/tabbar/c-2.png" alt=""></image>
				<view>
					个人中心
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "tabbar_staff",
		props: {
			active: {
				type: [String, Number],
				default: 1
			}
		},
		data() {
			return {
				change(menu) {
					uni.redirectTo({
						url: `/pages/staff/${menu}/${menu}`
					})
				}
			};
		}
	}
</script>

<style lang="scss">
	.tabbar {
		display: flex;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		text-align: center;
		box-shadow: 0px 0px 16rpx 4rpx rgba(143, 143, 143, 0.2);
		border-radius: 60rpx 60rpx 0 0;
		z-index: 100;
		font-size: 26rpx;

		.bar {
			width: calc(100%/3);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #999;

			image {
				width: 44rpx;
				height: 44rpx;
			}
		}

		.active {
			color: $main-color
		}
	}

	.seat {
		height: 120rpx;
	}
</style>